<template>
  <div class="download">
    <scroll-view type="list" scroll-y="true" class="demo-scroll-block bgColor">
      <snapshot id="view" mode="view">
        <img src="../../static/top-img.png" class="top-img" alt="" />
        <div class="top">
          <div class="schema-tip">
            方案报告生成-{{ schemaData.report.createtime?.substring(0, 10).split('-').join('/') }}
          </div>
          <img class="over-logo" src="../../static/new-logo.png" />
          <div class="polite">尊敬的：</div>
          <div class="userinfo">
            <div style="display: flex">
              <text class="name">{{ schemaData.customer?.usernames }}</text>
              <text class="name-desc">女士/先生</text>
            </div>
            <div class="report-text">您的全屋设计方案报告</div>
          </div>

          <div class="house-type">	
            <img
              src="https://fh4.qinyuan.cn/uploads/view/static/blur-blue.png"
              class="house-type-img"
            />
            <div class="type-text">
              <text class="left-1">户型：</text>
              <text class="left-2">{{ findHouseType(schemaData.customer.hometype) }}</text>
              <text class="left-3">面积：</text>
              <text class="left-4">{{ schemaData.customer?.area }}</text>
              <text class="left-5">m²</text>
            </div>

            <div class="prize">
              <text class="text">指导价格：</text>
              <text class="prize-num">{{ schemaData.report.prices }}</text>
              <text class="prize-symbol">￥</text>
            </div>
          </div>

          <div class="water-way">
            <img
              :src="'https://fh4.qinyuan.cn' + schemaData.report.water_image"
              class="water-way-img"
            />
          </div>
        </div>

        <div class="config-list bgColor">
          <div class="config-title">
            <div class="title-text">配置清单</div>
            <div class="line"></div>
            <img
              src="https://fh4.qinyuan.cn/uploads/view/static/blur-white.png"
              class="line-style"
            />
          </div>

          <div v-for="(item, index) in schemaData.products" :key="index" class="config-item">
            <!--            <img src="../../static/customMode/water.png" class="equip-img">-->
            <img :src="'https://fh4.qinyuan.cn' + item.images" class="equip-img" />
            <div class="introduce">
              <div class="equip-name">
                <div class="text">{{item.name}}</div>
                <div class="line"></div>
              </div>
              <div class="info-item">
                <div class="info-label">市场参考价</div>
                <div class="info-value">{{ item.prices }}￥</div>
              </div>
              <div class="info-item">
                <div class="info-label">型号名</div>
                <div class="info-value">{{ item.series_name }}</div>
              </div>
              <!--              <div class="info-item">-->
              <!--                <div class="info-label">XXXXX</div>-->
              <!--                <div class="info-value">XXXXXX</div>-->
              <!--              </div>-->
            </div>
          </div>
        </div>
      </snapshot>
    </scroll-view>

    <view class="hover-btn" @click="tap">
      <img src="https://fh4.qinyuan.cn/uploads/view/static/load-icon.png" class="icon" />
      <view class="text">下载方案</view>
    </view>
  </div>
</template>

<script>
import requestV1 from '../../common/requestV1';
export default {
  data() {
    return {
      report_id: null,
      schemaData: {
        customer: {},
        products: [],
        report: {},
        houseTypeList: []
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  async onLoad(e) {
    this.report_id = e.report_id;
    await this.getHouseTypeList();
    this.getSchemaData();
  },
  created() {},
  methods: {
    findHouseType(id) {
      if (!id) return '';
      console.log(this.houseTypeList, 'this.houseTypeList');
      const houseType = this.houseTypeList.find((item) => item.id == id);
      return houseType.name;
    },
    async getHouseTypeList() {
      const data = await requestV1({
        url: '/footmarks/homestye',
        type: 'get'
      });
      this.houseTypeList = data.data;
    },
    async getSchemaData() {
      const data = await requestV1({
        url: '/footmarks/download_plan',
        method: 'post',
        data: {
          report_id: this.report_id
          // report_id: 1
        }
      });

      console.log(data, '===data===');
      if (data.code === 1) {
        this.schemaData = data.data;
      }
    },
    tap() {
      console.log(`tap---------------`);
      uni
        .createSelectorQuery()
        .select('#view')
        .node()
        .exec((res) => {
          console.log(`res---------------`, res);
          const node = res[0].node;
          console.log('@@@@@@@@@ node:', node);

          node.takeSnapshot({
            type: 'arraybuffer',
            format: 'png',
            success: (res) => {
              console.log('@@ res:', res);
              const f = `${wx.env.USER_DATA_PATH}/方案.png`;
              const fs = wx.getFileSystemManager();
              fs.writeFileSync(f, res.data, 'binary');
              wx.showToast({
                title: '已保存到手机相册'
              });

              setTimeout(() => {
                wx.saveImageToPhotosAlbum({
                  filePath: f,
                  success() {
                    console.log('success==============');
                  },
                  complete(res) {
                    console.log('@@ saveImageToPhotosAlbum 3:', res);
                  }
                });
              }, 1000);
              wx.getImageInfo({
                src: f,
                success(res) {
                  console.log('@@ image info:', res);
                }
              });
            },
            fail(res) {
              uni.showToast({
                icon: 'none',
                duration: 3000,
                title: res
              });
              console.log('@@@ fail:', res);
            },
            complete(res) {
              console.log(res, 'complete');
            }
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.top-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 240px;
  object-fit: cover;
  z-index: 10;
}
.demo-scroll-block {
  width: 100%;
  height: 100vh;
}
.page-section-spacing {
  margin-top: 60rpx;
}
.scroll-view_H {
  white-space: nowrap;
}
.scroll-view-item {
  height: 300rpx;
}
.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
}
.bgColor {
  background-color: rgba(54, 55, 57);
}
.download {
  height: 100vh;
  overflow: auto;
}
.top {
  padding-top: 90rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  background-color: #363739;
  .schema-tip {
    color: #fff;
    font-size: 36rpx;
    text-align: center;
    margin-bottom: 50rpx;
  }
  .over-logo {
    width: 50%;
    height: 120rpx;
    padding-left: 64rpx;
    margin-left: -24rpx;
  }
  .polite {
    color: #fff;
    font-size: 42rpx;
    margin: 60rpx 0 50rpx;
    font-weight: bold;
  }
  .userinfo {
    .name {
      color: #fff;
      font-size: 48rpx;
      font-weight: bold;
      margin-right: 12rpx;
    }
    .name-desc {
      color: #fff;
      font-size: 30rpx;
      line-height: 2.6;
    }
    .report-text {
      color: #fff;
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 60rpx;
    }
  }
  .house-type {
    background-size: 100% 100%;
    margin-bottom: 80rpx;
    .house-type-img {
      position: absolute;
      top: -150rpx;
      width: 750rpx;
      height: 500rpx;
    }
    .type-text {
      display: flex;
      justify-content: center;
      font-weight: bold;
      .left-1 {
        color: rgb(254, 216, 194);
        font-size: 48rpx;
      }
      .left-2 {
        color: rgb(162, 128, 238);
        font-size: 40rpx;
        line-height: 1.8;
      }
      .left-3 {
        color: rgb(254, 216, 194);
        font-size: 48rpx;
        margin-left: 10rpx;
      }
      .left-4 {
        color: rgb(62, 177, 246);
        font-size: 40rpx;
        line-height: 1.9;
      }
      .left-5 {
        color: rgb(254, 216, 194);
        font-size: 48rpx;
      }
    }
    .prize {
      display: flex;
      justify-content: center;
      font-weight: bold;
      .text {
        color: #fff;
        font-size: 36rpx;
      }
      .prize-num {
        color: rgb(62, 177, 246);
        font-size: 40rpx;
        line-height: 1.1;
      }
      .prize-symbol {
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
  .water-way {
    height: 460rpx;
    background-color: rgb(37, 37, 50);
    border: 1rpx solid #fff;
    .water-way-img {
      margin-top: 30rpx;
      margin-left: 34rpx;
      height: 400rpx;
    }
  }
}
.config-list {
  padding: 50rpx 54rpx 40rpx;
  background-color: #363739;
  .config-title {
    height: 70rpx;
    .title-text {
      font-size: 34rpx;
      color: #fff;
      background-color: #868889;
      width: 180rpx;
      height: 44rpx;
      line-height: 40rpx;
      text-align: center;
      border-radius: 20rpx;
      margin: 0 auto;
      z-index: 3;
    }
    .line {
      position: absolute;
      width: 100%;
      height: 1rpx;
      background: #fff;
      top: 21rpx;
    }
    .line-style {
      position: absolute;
      top: -170rpx;
      height: 400rpx;
      width: 100%;
    }
  }
  .config-item {
    height: 350rpx;
    border: 2rpx solid #fff;
    border-radius: 28rpx;
    margin-bottom: 40rpx;
    display: flex;
    padding: 20rpx;
    .equip-img {
      width: 240rpx;
      height: 80%;
      margin-top: 30rpx;
    }
    .introduce {
      width: calc(100% - 240rpx);
      .equip-name {
        font-size: 40rpx;
        font-weight: bold;
        text-align: right;
        color: #fff;
        .line {
          width: 200rpx;
          height: 1rpx;
          margin-left: 159rpx;
          background-color: #fff;
          margin-bottom: 16rpx;
        }
      }
      .info-item {
        color: #fff;
        display: flex;
        margin-left: 20rpx;
        border-bottom: 1rpx dotted #fff;
        margin-bottom: 20rpx;
        .info-label {
          font-size: 34rpx;
          width: 55%;
        }
        .info-value {
          width: calc(45% - 20rpx);
          font-size: 26rpx;
          line-height: 2;
        }
      }
    }
  }
}
.hover-btn {
  position: fixed;
  bottom: 150rpx;
  right: 40rpx;
  border-radius: 24rpx;
  width: 104.4rpx;
  height: 104.4rpx;
  background-color: rgba(55, 68, 134, 1);
  text-align: center;
  padding: 14rpx 4rpx 0;
  box-sizing: border-box;
  .icon {
    width: 45rpx;
    height: 45rpx;
    margin: 0 auto 8rpx;
  }
  .text {
    color: #fff;
    font-size: 18rpx;
  }
}
</style>
